<template>
  <div class="warp">
    <div class="warp_auto">
      <div shadow="hover" class="department">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="ICU主要疾病诊断分类类型" name="first">
            <div class="warp_top">
              <div class="jiansuo-box">
                <span class="label">名称：</span>
                <el-input
                  v-model="diagnoseTypeName"
                  class="input"
                  clearable
                  placeholder="请输入名称"
                />
              </div>
              <div class="jiansuo-box">
                <span class="label">诊断分类：</span>
                <el-select
                  v-model="value2"
                  clearable
                  placeholder="请选择"
                  class="input"
                >
                  <el-option
                    v-for="item in operation"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div class="jiansuo-box">
                <span class="label">状态：</span>
                <el-select
                  v-model="value"
                  placeholder="请选择"
                  class="input"
                  clearable
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div class="jiansuo-box">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  class="btn"
                  @click="btn"
                >检索</el-button>
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  class="btn"
                  @click="dialogFormVisible = true"
                >新增类型</el-button>
              </div>
            </div>

            <!-- 新增类型 -->
            <el-dialog
              title="新增诊断分类类型"
              :visible.sync="dialogFormVisible"
              class="mod_box"
              custom-class="role-mask"
              :close-on-click-modal="false"
            >
              <el-form
                ref="ruleForm"
                :model="ruleForm"
                :rules="rules"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item label="类型名称：" prop="diagnoseTypeName">
                  <el-input
                    v-model="ruleForm.diagnoseTypeName"
                    class="el-inputer"
                    placeholder="请输入类型名称"
                  />
                </el-form-item>
                <el-form-item label="排序：" prop="sortNum">
                  <el-input-number
                    v-model="ruleForm.sortNum"
                    class="el-inputer1"
                    controls-position="right"
                    :min="1"
                    :max="10"
                    @change="handleChange"
                  />
                </el-form-item>
                <el-form-item label="诊断分类：" prop="operation">
                  <el-switch
                    v-model="ruleForm.operation"
                    class="switch-btn"
                    inactive-text="否"
                    active-text="是"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#02538C"
                    inactive-color="#B9B9B9"
                  />
                </el-form-item>

                <el-form-item label="状态：" prop="status">
                  <el-switch
                    v-model="ruleForm.status"
                    class="switch-btn"
                    inactive-text="禁用"
                    active-text="启用"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#02538C"
                    inactive-color="#B9B9B9"
                  />
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button
                  :plain="true"
                  type="primary"
                  @click="submitForm_leix('ruleForm')"
                >保 存</el-button>
              </div>
            </el-dialog>

            <!-- 分类类型表格明细 -->
            <el-card>
              <el-table
                :data="arr"
                style="width: 100%"
                height="538"
                stripe
                :header-cell-style="{ background: '#d2e0f9', color: '#606266' }"
              >
                <el-table-column
                  type="index"
                  width="50"
                  label="序号"
                  align="center"
                />
                <el-table-column label="类型名称" min-width="60%" align="center">
                  <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                      scope.row.diagnose_type_name
                    }}</span>
                  </template>
                </el-table-column>

                <el-table-column
                  label="是否手术分类"
                  min-width="38%"
                  align="center"
                >
                  <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                      scope.row.operation == 0 ? "非手术" : "手术"
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  property="status"
                  label="状态"
                  width="260"
                  align="center"
                  header-align="center"
                >
                  <template scope="scope">
                    <el-switch
                      v-model="scope.row.status"
                      class="switch-btn"
                      inactive-text="禁用"
                      active-text="启用"
                      :active-value="1"
                      :inactive-value="2"
                      active-color="#02538C"
                      inactive-color="#B9B9B9"
                      @change="changeSwitchs(scope.$index, scope.row)"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="排序" align="center">
                  <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                      scope.row.sort_num
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.row)"
                    >编辑</el-button>
                    <el-popover
                      :ref="`popover-${scope.$index}`"
                      trigger="click"
                      placement="top"
                      width="100"
                    >
                      <p class="el-icon-warning">确定删除</p>
                      <div style="text-align: right; margin: 0">
                        <el-button
                          size="mini"
                          type="text"
                          @click="no(scope)"
                        >取消</el-button>
                        <el-button
                          type="primary"
                          size="mini"
                          @click="yes(scope)"
                        >确定</el-button>
                      </div>
                      <el-button
                        slot="reference"
                        size="mini"
                        style="margin-left: 10px"
                        type="danger"
                      >删除</el-button>
                    </el-popover>
                  </template>
                </el-table-column>
              </el-table>
              <component-dialog
                :dialog-visible="dialogVisible"
                :dialog-info="dialogInfo"
                @update:dialogVisible="dialogVisibles"
              />
              <div class="paging">
                <el-pagination
                  :current-page="start"
                  :page-size="PageSize"
                  :pager-count="5"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalCount"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </el-card>
          </el-tab-pane>

          <el-tab-pane label="ICU主要疾病诊断分类模板" name="second">
            <osiosdemo />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- switch -->
    <el-dialog title="状态更新" :visible.sync="dialogUpdata" class="mod_box1">
      <span>
        <i class="el-icon-warning" />此操作将会改变开关状态, 是否继续?</span>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="(dialogUpdata = false), cancelSwitch()"
        >取 消</el-button>
        <el-button
          type="primary"
          @click="(dialogUpdata = false), updataSwitch()"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from 'axios'
import componentDialog from '@/components/mask/diagnosis'
import osiosdemo from '@/views/interactive/osiosdemo'
import { MessageBox, Message } from 'element-ui'
import {
  diagnosisQuest,
  diagnosisDelete,
  diagnosisInsert,
  diagnosisUpdate
} from '@/api/table'

export default {
  components: {
    componentDialog,
    osiosdemo
  },
  data() {
    return {
      dialogUpdata: false, // 开关
      switchId: '',
      switchStatus: '',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      leixin: '',
      optionsleixin: [],
      activeName: 'first',
      // 控制弹窗 显示
      dialogVisible: false,
      // 点击查看按钮  这条数据详细信息
      dialogInfo: {},

      listarr: null,
      listLoading: true,
      loading: false,
      diagnoseTypeName: '',
      dialogFormVisible: false,
      dialogFor: false,
      del: false,
      ruleForm: {
        diagnoseTypeName: '',
        diagnoseTypeName: '',
        status: '',
        operation: '',
        sortNum: ''
      },
      rules: {
        diagnoseTypeName: [
          { required: true, message: '请输入类型名称', trigger: 'blur' }
        ],
        sortNum: [{ required: true, message: '请输入排序', trigger: 'blur' }]
      },
      options: [
        {
          id: '0',
          value: '1',
          label: '启用'
        },
        {
          id: '1',
          value: '0',
          label: '禁用'
        }
      ],
      operation: [
        {
          id: '1',
          value: '1',
          label: '手术'
        },
        {
          id: '0',
          value: '0',
          label: '非手术'
        }
      ],
      value: '',
      value2: '',
      arr: [],
      arrleix: [], // 新增类型
      start: 1, // 默认显示第几页
      totalCount: 0, // 总条数，根据接口获取数据长度(注意：这里不能为空)
      pgeSizes: [10, 20, 30, 40], // 个数选择器（可修改）
      PageSize: 10, // 默认每页显示的条数（可修改）
      diagnoseTypeName: '',
      status: '',
      roleName: '',
      num: 1
    }
  },
  created() {},
  mounted() {
    this.diagnosisQuest(this.PageSize, this.start)
  },
  methods: {
    yes(scope) {
      // 可以在这里执行删除数据的回调操作.......删除操作......
      console.log(scope.row.id)
      const id = scope.row.id
      diagnosisDelete({ id: id }).then((res) => {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.diagnosisQuest(this.PageSize, this.start)
      })

      scope._self.$refs[`popover-${scope.$index}`].doClose()
    },

    no(scope) {
      this.$message('取消删除')
      scope._self.$refs[`popover-${scope.$index}`].doClose()
    },
    // 新增模板 +
    submitForm() {
      diagnosisInsertarr(this.ruleForm).then((res) => {
        this.arr = res.data
        this.diagnoseCoefficinetItemDictionaryQuest(this.PageSize, this.start)
      })
    },
    // 新增类型
    submitForm_leix(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          diagnosisInsert(this.ruleForm).then((res) => {
            if (res.code === 3) {
              Message({
                message: res.msg,
                type: 'error',
                duration: 5 * 1000
              })
              this.dialogFormVisible = true
            } else {
              this.arrleix = res.data
              this.dialogFormVisible = false
            }
            this.diagnosisQuest(this.PageSize, this.start)
          })
        } else {
          this.$message({
            message: '请填写必填项！',
            type: 'warning',
            duration: 1500
          })
          this.dialogFormVisible = true

          return false
        }
      })
    },
    // 下拉获取id
    currentSel(selVal) {
      this.diagnoseTypeName = selVal.user_type_code
    },
    // 列表开关的id
    changeSwitchs(index, row) {
      this.switchId = row.id
      this.switchStatus = row.status
      this.dialogUpdata = true
    },
    // 保存开关状态-确认
    updataSwitch() {
      diagnosisUpdate({
        id: this.switchId,
        status: this.switchStatus
      }).then((res) => {
        this.diagnosisQuest(this.PageSize, this.start)
      })
    },
    // 保存开关状态-取消
    cancelSwitch() {
      this.diagnosisQuest(this.PageSize, this.start)
    },
    // 搜索按钮
    btn() {
      this.start=1;
      diagnosisQuest({
        diagnoseTypeName: this.diagnoseTypeName,
        status: this.value === '' ? null : Number(this.value),
        operation: this.value2 === '' ? null : Number(this.value2),
        start: this.start,
        size: this.PageSize,
      }).then((res) => {
        this.arr = res.data;
        this.totalCount = res.totalCount;
      })
    },
    handleEdit(info) {
      // 弹窗打开
      this.dialogVisible = true
      this.dialogInfo = info
      console.log(info)
    },
    // 子组件传 过来的 数据
    dialogVisibles(v) {
      this.dialogVisible = v
      console.log(v)
    },
    handlediagnosisDelete(index, row) {
      console.log(index, row)
    },
    diagnosisQuest(n1, n2) {
      diagnosisQuest({
        size: n1,
        start: n2
      }).then((res) => {
        this.arr = res.data
        this.totalCount = res.totalCount
      })
    },
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val
      // 点击每页显示的条数时，显示第一页
      this.list(val, 1)
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.start = 1
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.start = val

      // 切换页码时，要获取每页显示的条数
      this.diagnosisQuest(this.PageSize, (this.start = val))
    },
    change: function(index, row) {
      console.log(index, row, '---')
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>
<style lang="scss" scoped>
.mod_box {
  margin-left: 28%;
  width: 44%;
}
</style>
